//  生产环境的配置
// 注意webpack 遵循 commonjs 的语法, 所有在该文件中导入导出 使用require 和 module.exports

// 导入nodejs 内置模块path ,用来处理path 路径的
const path = require('path');
// 导入打包页面模板的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");

//导入该插件, 可以将css 抽离, 以外部样式表的形式导入页面中
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 导入vue-loader
const VueLoaderPlugin = require("vue-loader/lib/plugin");


// commonjs 规范导出语法
module.exports = {
    mode: "production", // 打包模式  development |  production
    //  entry: "./src/main.js",//单入口文件 打包的入口文件, 路径以根路径为准
    entry: { // 多入口文件配置
        main: "./src/main.js", // key 为打包后的文件名
        login: "./src/login.js"
    },
    output: { // 打包的出口配置
        path: path.resolve(__dirname, "../dist"), // 打包后的文件的输出文件目录为dist目录
        // [name]默认的名称为main（如果需要分目录，可以在名字前加文件夹名字）
        filename: "js/[name].js", //[name]默认为 main.js 
    },
    plugins: [//配置插件
        new HtmlWebpackPlugin({// 配置要打包的html页面
            template: "./index.html"  // 该路径是相对于根目录的路径,并不是相对于当前目录的路径
        }),
        new MiniCssExtractPlugin({ // 抽离css 的插件
            filename: "css/[name]_[hash:6].css",  // 防止生成的css 文件名一致 所以hash 表示取随机码
        }),
        new VueLoaderPlugin(),  // 配置vue-loader插件
    ],
    devServer: { // 配置服务器 本地测试服务器, 可以实时预览项目效果
        // 端口号
        port: 8080,
        // 域名
        host: "localhost",
        // 自动打开浏览器（可能因为计算机安全策略导致不生效）
        open: true,
        // 服务器代理 --> 解决开发环境跨域问题
        proxy: {
            // 一旦devServer服务器接受到 /api开头的请求，就会把请求转发到另一个服务器
            "/api": {
                target: "http://kumanxuan1.f3322.net:8001",
                // 发送请求时，请求路径重写: 将/api 去除
                pathRewrite: {
                    "^/api": "",
                },
            },
        },
    },
    module: { // 各种loader 配置
        rules: [
            {
                'test': /\.css$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' }]
            },
            {
                'test': /\.less$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' },
                ]
            },
            // {
            //     test: /\.(png|jpg|jpeg|gif)$/i,
            //     use: [
            //         {
            //             loader: 'url-loader', // css中有图片,使用 该loader 去处理, 
            //             options: {
            //                 limit: 8 * 1024, //小于 8kb 使用base64编码
            //                 name: "img/[name].[ext]", // 打包后的文件路径及文件名规则,ext表示扩展名
            //                 publicPath: '/'
            //             }
            //         }
            //     ]
            // },
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: "img/[name].[ext]",
                            publicPath: '/'
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: { // 压缩 jpeg 图片
                                progressive: true,
                                quality: 65
                            },
                            optipng: { // 配合pngquant一起使用,共同压缩png图片 
                                enabled: false,
                            },
                            pngquant: { // 压缩png
                                quality: '65-90',
                                speed: 4
                            },
                            gifsicle: { //处理 gif
                                interlaced: false,
                            },
                            webp: { // 处理webp 
                                quality: 75
                            }
                        }
                    }
                ]
            },
            {
                test: /\.html$/, // 配置页面文件
                use: [
                    {
                        loader: 'html-loader', // 页面文件中如果有imgm,使用该loader 去处理
                    }
                ]
            },
            {
                test: /\.js$/, // 配置所有的js 文件
                use: "babel-loader", // 使用该babal 将该js 文件中的高级es6,6,7..语法转变成es5语法
                exclude: /node_modules/ // 除了 node_modules
            },
            {
                test: /\.vue$/,
                use: [
                    { loader: "vue-loader" }
                ]
            }
        ]
    },
    resolve: { // 配置路径别名
        alias: {
            // 定义一个@，可在import引入时使用
            "@": path.join(__dirname, "../src"),
        },
        // 配置要省略的后缀文件名
        extensions: [".js", ".vue", ".jsx"]
    },
    externals: { // 配置要忽略打包的文件, 也就是不打包的文件
        jquery: 'jQuery'
    },
    performance: {//打包文件大小配置
        "maxEntrypointSize": 10000000,
        "maxAssetSize": 30000000
    }
};
